<template>
    <h2>商品管理</h2>
    <table>
        <thead>
            <tr>
                <th>商品编号</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品简介</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in products" :key="item.productNo">
                <td>{{ item.productNo }}</td>
                <td>{{ item.productName }}</td>
                <td>{{ item.productPrice }}</td>
                <td>{{ item.productDesc }}</td>
                <td>
                    <button @click="goDetail(item.productNo)">详情</button>
                    <button @click="goUpdate(item.productNo)">修改</button>
                </td>
            </tr>
        </tbody>
    </table>
</template>

<script lang='ts' setup>
    import IProductItem from '@/types/IProductItem'
    import {reactive} from 'vue'
    import {useRouter} from 'vue-router'
    let products=reactive<Array<IProductItem>>([
        {
            productNo:'w1001',
            productName:'金骏眉红茶',
            productPrice:100.5,
            productDesc:'红茶中的精品，老少皆宜'
        },
        {
            productNo:'w1002',
            productName:'碧螺春',
            productPrice:100.5,
            productDesc:'碧螺春茶的精品，好喝的很'
        }
    ])
    const router=useRouter()
    const goDetail=(id:string)=>{
        //实现路由跳转
        router.push({
            path:`/productdetail/${id}`
        })
    }
    const goUpdate=(id:string)=>{
        router.push({
            path:'/productUpdate',
            query:{
                id
            }
        })
    }

</script>

<style lang='scss' scoped>
</style>